<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radio Button CSS</title>
    <style type="text/css">
        .radio{
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            margin-right: 10px;
        }
        .radio_input{
            display: none;
        }
        .radio_circle{
            width: 1.25em;
            height: 1.25em;
            border-radius: 50%;
            margin-right: 10px;
            box-sizing: border-box;
            padding: 2px;
            transition: transform 0.55s;
        }
        .radio_circle_normal{
            border: 2px solid #d8e4e2;
        }
        .radio_circle_green{
            border: 2px solid green; /*#d8e4e2*/
        }
        .radio_circle_green::after{
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            background: green;
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.55s;
        }
        .radio_input:checked + .radio_circle_green::after{
            transform: scale(1);
        }
        .radio_circle_red{
            border: 2px solid red; /*#d8e4e2*/
        }
        .radio_circle_red::after{
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            background: red;
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.55s;
        }
        .radio_input:checked + .radio_circle_red::after{
            transform: scale(1);
        }
        .radio_circle_amber{
            border: 2px solid #ffbf00;
        }
        .radio_circle_amber::after{
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            background: #ffbf00;
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.55s;
        }
        .radio_input:checked + .radio_circle_amber::after{
             transform: scale(1);
         }
    </style>
</head>
<body>
    <h1>Custom Radio Button</h1>
    <label for="myRadio_green" class="radio">
        <input type="radio" name="assessment" value="green" id="myRadio_green" class="radio_input" />
        <span class="radio_circle radio_circle_normal"></span>
        Green
    </label>
    <label for="myRadio_amber" class="radio">
        <input type="radio" name="assessment" value="amber" id="myRadio_amber" class="radio_input" />
        <span class="radio_circle radio_circle_normal"></span>
        Amber
    </label>
    <label for="myRadio_red" class="radio">
        <input type="radio" name="assessment" value="red" id="myRadio_red" class="radio_input" />
        <span class="radio_circle radio_circle_normal"></span>
        Red
    </label>

    <script type="text/javascript">
        document.querySelectorAll("[type='radio']").forEach(item=>{
            item.addEventListener('click', function(){
                reset();
                if(this.checked){
                    this.nextElementSibling.className = `radio_circle radio_circle_${this.value}`;
                }else{
                    this.nextElementSibling.className = `radio_circle radio_circle_normal`;
                }
            });
        });

        function reset(){
            document.querySelectorAll("[type='radio']").forEach(p=>{
                p.nextElementSibling.className = `radio_circle radio_circle_normal`;
            });
        }
    </script>
</body>
</html>